<template>
    <div class="home" v-infinite-scroll="load" :infinite-scroll-disabled="articleData.noMore">
        <!--        <div style="height: 100%;z-index: -1">-->
        <!--            <clock></clock>-->
        <!--        </div>-->
        <!--        <el-container-->
        <!--                style="height: 100%;position: absolute;top: 0;width: 100%;">-->
        <el-container>
            <el-header style="height: auto">
                <home-header/>
            </el-header>
            <el-container>
                <el-aside width="250px" v-if="isAdmin">
                    <el-menu router unique-opened>
                        <el-submenu :index="index+''"
                                    v-for="(item, index) in routes"
                                    :key="index"
                                    v-show="item.id != 30">
                            <template slot="title">
                                <i :class="item.iconCls" style="color: #000000;margin-right: 5px"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item :index="children.path"
                                          v-for="(children, indexj) in item.children"
                                          :key="indexj">{{children.name}}
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main :style="isAdmin?'width:1652px':'width:1700%;margin:auto'">
                    <el-breadcrumb separator-class="el-icon-arrow-right"
                                   v-if="this.$router.currentRoute.path != '/home'">
                        <div v-if="isAdmin">
                            <el-breadcrumb-item style="color: #000000" :to="{path: '/home'}">首页</el-breadcrumb-item>
                            <el-breadcrumb-item style="color: #000000">{{this.$router.currentRoute.name}}
                            </el-breadcrumb-item>
                        </div>
                    </el-breadcrumb>
                    <div v-if="this.$router.currentRoute.path == '/home'">
                        <MyArticleHome/>
                    </div>
                    <router-view class="homeRouterView"/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>

    import clock from "../components/login/clock";
    import {mapState} from "vuex";
    import MyArticleHome from "../components/myHome/MyArticleHome";
    import RichText from "./personal/components/richText/richText";
    import HomeHeader from "../components/homeHeader/HomeHeader";
    import eventBus from "../eventBus";

    export default {
        name: "Home",
        components: {
            HomeHeader,
            RichText,
            MyArticleHome,
            clock
        },
        data() {
            return {
                isAdmin: false,                 //是否为管理员
                loginServiceApi: this.$store.state.loginServiceApi, //登录固定路径
                articleData: {                  //文章内容数据
                    articleContent: [],         //文章数据
                    count: 0,                   //页数
                    size: 10,                   //页数大小
                    loading: false,             //加载页面
                    noMore: false,              //是否还有数据
                },
                routerPath: this.$router.currentRoute.path, //当前路由
                articleUrl: '',
            }
        },
        watch: {
            //监听当前路由
            //当路由发生变化时
            $route: {
                handler: function (val, oldVal) {
                    if (oldVal.path != val.path) {
                        //将文章内容修改为初始数据
                        this.articleData =
                            {
                                articleContent: [],
                                count: 0,
                                size: 10,
                                loading: false,
                                noMore: false,
                            }
                        //判断当前是否登录了用户
                        let sessionUser = JSON.parse(window.sessionStorage.getItem('user'))
                        if (sessionUser)
                            this.load()
                    }
                },
                // 深度观察监听
                // deep: true
            }
        },
        created() {
            //登录完进入home页面后，关闭时钟的循环获取登录状态
            window.sessionStorage.setItem("openLogin", false);
            this.changeIsAdmin();
        },
        computed: {
            routes() {
                return this.$store.state.routes
            },
            ...mapState({
                user: state => state.user,
                count: state => state.count,
                timeServiceApi: state => state.timeServiceApi,
            })
        },
        mounted() {
        },
        //页面销毁时
        destroyed() {
            //打开时钟的循环获取登录状态
            window.sessionStorage.setItem("openLogin", true);
        },
        methods: {
            //判断当期那用户是否包含管理员角色
            changeIsAdmin() {
                this.user.roles.forEach(item => {
                    if (item.id == 6) {
                        this.isAdmin = true;
                        this.$store.commit("initIsAdmin",true);
                    }
                })
            },
            //跳到主页面
            goHome() {
                this.$router.replace('/home')
            },
            //加载文章内容
            async load() {
                // if(this.$router.currentRoute.path == )
                this.articleData.count++
                this.articleData.loading = true;
                let routerPath = this.$router.currentRoute.path;
                if (routerPath == "/home") {
                    this.articleUrl = this.timeServiceApi + '/article/' +
                        '?current=' + this.articleData.count +
                        '&size=' + this.articleData.size +
                        '&userName=' + this.user.username
                }else
                if (routerPath == "/personal/center") {
                    this.articleUrl = this.timeServiceApi + '/article/getArticleByUserName' +
                        '?current=' + this.articleData.count +
                        '&size=' + this.articleData.size +
                        '&userName=' + this.user.username
                }else return ;
                await this.getRequest(this.articleUrl)
                    .then(res => {
                        this.articleData.loading = false;
                        if (res) {
                            if (res.code == 200) {
                                if (res.data.list.length > 0) {
                                    let data = res.data.list;
                                    data.forEach(item => {
                                        this.articleData.articleContent.push(item)
                                    })
                                    eventBus.$emit("getArticleData", this.articleData);

                                } else {
                                    this.articleData.noMore = true;
                                }
                            }
                        }
                    })
            }
        },
    }
</script>

<style scoped>

    .home {
        overflow-y: auto;
        width: 99.99%;
        height: 99.99%;
    }

    .el-header{
        padding: 0;
    }
    .el-aside {
        background: #ffffff1f;

    }

    .el-dropdown-link {
        display: flex;
        align-items: center;
    }

    .el-dropdown-link img {
        height: 48px;
        border-radius: 24px;
        margin-left: 10px;
    }

    .homeWelcome {
        font-size: 30px;
        text-align: center;
        font-family: 华文楷体;
        color: #409EFF;
        padding-top: 50px;
    }

    .homeRouterView {
        margin-top: 15px;
    }
    ::v-deep .el-container {
        background: white;
    }

    ::v-deep .el-menu {
        background-color: #fff0;
    }

    .el-dropdown {
        color: #c5c5c5;
    }

    li {
        font-size: 15px;
    }

    span {
        font-size: 15px;
        font-weight: bold;
    }

    ::v-deep .el-menu-item.is-active {
        color: #409eff;
    }

    ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner,
    .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
    .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
    .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
        color: #000000;
    }

    ::v-deep .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
        color: #000000;
    }

</style>
